<template>
    <div class="module-box">
        <div class="content-wrapper">
            <!-- 左侧固定按钮 -->
            <div class="nav-buttons">
                <div v-for="(item, index) in fixedLeftItems" :key="index" class="nav-btn"
                    :class="{ active: activeLeftIndex === index }" @click="handleLeftClick(index)">
                    {{ item }}
                </div>
            </div>
            <!-- 右侧动态内容 -->
            <div class="right-content">
                <div class="desc-text">
                    {{ contentMap[activeLeftIndex].desc }}
                </div>
                <div class="key-buttons">
                    <div class="key-btn" v-for="(btn, i) in contentMap[activeLeftIndex].keyButtons" :key="i">
                        {{ btn }}
                    </div>
                </div>
            </div>
        </div>
        <div class="sub-title">{{ subTitle }}</div>
    </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onUnmounted } from 'vue';
// 接收父组件参数
const props = defineProps({
    subTitle: { type: String, required: true },
    fixedLeftItems: {  // 固定的左侧按钮数组
        type: Array,
        required: true,
        default: () => []
    },
    contentMap: {  // 右侧内容映射（索引与左侧按钮对应）
        type: Array,
        required: true,
        default: () => [{ desc: '', keyButtons: [] }]
    }
});

// 响应式状态
const activeLeftIndex = ref(0);  // 当前激活的左侧按钮索引
let timer = null;  // 自动切换定时器

// 手动点击左侧按钮切换
const handleLeftClick = (index) => {
    activeLeftIndex.value = index;  // 更新激活索引
    resetTimer();  // 手动操作后重置定时器，避免立即自动切换
};

// 自动切换到下一个按钮
const autoSwitchNext = () => {
    // 计算下一个索引（循环切换：最后一个 -> 第一个）
    const nextIndex = (activeLeftIndex.value + 1) % props.fixedLeftItems.length;
    activeLeftIndex.value = nextIndex;  // 自动更新索引
};

// 重置定时器（5秒切换一次）
const resetTimer = () => {
    clearInterval(timer);  // 清除现有定时器
    timer = setInterval(autoSwitchNext, 5000);  // 重新启动定时器
};

// 组件挂载时启动自动切换
onMounted(() => {
    resetTimer();
});

// 组件卸载时清除定时器（防止内存泄漏）
onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style scoped>
/* 样式与之前保持一致，此处省略 */
.module-box {
    width: 950px;
    height: 466px;
    padding: 15px;
    background-image: url("/imgs/tianjin/矩形 933 拷贝 3.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.content-wrapper {
    display: flex;
    gap: 30px;
}

.nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

.nav-btn {
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    width: 238px;
    font-family: "微软雅黑粗体";
    font-size: 25px;
    color: #FFFFFF;
    line-height: 22px;
    width: 468px;
    height: 51px;
    background-image: url("/imgs/tianjin/矩形 1269(1).png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

.nav-btn.active {
    width: 468px;
    height: 51px;
    background-image: url("/imgs/tianjin/矩形 1269.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.right-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 429px;
    height: 366px;
    background-image: url("/imgs/tianjin/矩形 933 拷贝 7.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 圆点伪元素 */
.desc-text::before {
    content: "";
    /* 空内容，通过样式生成圆点 */
    position: absolute;
    left: 0;
    top: 15px;
    width: 15px;
    height: 15px;
    background-image: url("/imgs/wuhan/组 7798 拷贝 6.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.desc-text {
    position: relative;
    padding-left: 30px;
    text-align: justify;
    width: 333px;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 22px;
    color: #FFFFFF;
    line-height: 40px;
}

.key-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.key-btn {
    padding: 12px 20px;
    text-align: center;

    width: 283px;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 24px;
    color: #A2DCFF;
    line-height: 40px;

    width: 357px;
    height: 44px;
    background-image: url("/imgs/tianjin/矩形 933 拷贝 10.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.sub-title {
    text-align: center;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 33px;
    color: #FFFFFF;
    line-height: 46px;
}
</style>